<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../static/layui/css/layui.css">
</head>
<body>
<div class="container">
    <div class="layui-row">
        <div class="layui-tab" style="margin: 0;">
            <ul class="layui-tab-title">
                <li class="layui-this">百度地图api</li>
                <li>高德地图api</li>
                <li>腾讯地图api</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div class="" style="width: 100%;">
                        <form class="layui-form layui-inline" id="form1">
                            <div class="layui-form-item baidu" style="margin-left: 10px;">
                                <input type="text" placeholder="美食店名" class="layui-input-inline layui-input"
                                       name="name">
                                <input type="text" placeholder="地址" class="layui-input-inline layui-input"
                                       name="address">
                                <input type="text" placeholder="标签" class="layui-input-inline layui-input" name="tag">
                            </div>
                        </form>
                        <div class="layui-inline" style="float: right;margin-right: 10px;">
                            <button class="layui-btn" onclick="search()">查询</button>
                        </div>
                    </div>
                    <table id="table1"></table>
                </div>
                <div class="layui-tab-item">
                    <div class="" style="width: 100%;">
                        <form class="layui-form layui-inline" id="form2">
                            <div class="layui-form-item gaode" style="margin-left: 10px;">
                                <input type="text" placeholder="美食店名" class="layui-input-inline layui-input"
                                       name="name">
                                <input type="text" placeholder="地址" class="layui-input-inline layui-input"
                                       name="address">
                                <input type="text" placeholder="美食类型" class="layui-input-inline layui-input"
                                       name="type">
                            </div>
                        </form>
                        <div class="layui-inline" style="float: right;margin-right: 10px;">
                            <button class="layui-btn" onclick="search2()">查询</button>
                        </div>
                    </div>
                    <table id="table2"></table>
                </div>
                <div class="layui-tab-item">
                    <div class="" style="width: 100%;">
                        <form class="layui-form layui-inline" id="form3">
                            <div class="layui-form-item gaode" style="margin-left: 10px;">
                                <input type="text" placeholder="店名" class="layui-input-inline layui-input" name="name">
                                <input type="text" placeholder="地址" class="layui-input-inline layui-input"
                                       name="address">
                                <input type="text" placeholder="类型" class="layui-input-inline layui-input" name="type">
                            </div>
                        </form>
                        <div class="layui-inline" style="float: right;margin-right: 10px;">
                            <button class="layui-btn" onclick="search3()">查询</button>
                        </div>
                    </div>
                    <table id="table3"></table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="../static/layui/layui.all.js"></script>
<script type="text/javascript">
    const table = layui.table;
    const layer = layui.layer;
    const $ = layui.$;

    const table1 = table.render({
        elem: "#table1",
        height: "666",
        url: "http://127.0.0.1/foodShopSearch/queryFoodShopBaidu",
        method: "post",
        page: true,
        even: true,
        limit: 20,
        cols: [[
            {type: "checkbox", width: 50},
            {type: "numbers", title: "序号", width: 50},
            {field: "objId", title: "主键", hide: true},
            {
                field: "name", title: "美食店名", templet: function (res) {
                    return "<a href='javaScript:void(0);' onclick='showDetail(this)' id='" + res.uid + "' detailUrl='" + res.detailUrl + "'>" + res.name + "</a>";
                }
            },
            {field: "telephone", title: "电话"},
            {field: "address", title: "地址"},
            {field: "area", title: "所属地区", width: 120},
            {field: "tag", title: "标签"},
            {field: "price", title: "人均消费（元）", width: 150},
            {field: "overallRating", title: "评分", width: 80}
        ]]
    });

    //初始化表格
    const table2 = table.render({
        elem: '#table2',
        url: "http://127.0.0.1/foodShopSearch/queryFoodShop",
        method: "post",
        page: true,
        even: true,
        height: "666",
        limit: 20,
        cols: [[
            {type: "checkbox", width: 50},
            {type: "numbers", title: "序号", width: 50},
            {field: "objId", title: "主键", hide: true},
            {
                field: "name", title: "美食店名", templet: function (res) {
                    return "<a href='javaScript:void(0);' onclick='showDetail2(this)' id='" + res.id + "'>" + res.name + "</a>";
                }
            },
            {field: "tel", title: "电话"},
            {field: "address", title: "地址"},
            {field: "type", title: "类型"},
            {field: "tag", title: "菜单"},
            {field: "cost", title: "平均消费", width: 100},
            {field: "rating", title: "评分", width: 80},
            {field: "timestamp", title: "统计时间"},
            {field: "insertTime", title: "大数据计算时间"}
        ]]
    });

    //初始化表格
    const table3 = table.render({
        elem: '#table3',
        url: "http://127.0.0.1/foodShopSearch/queryFoodShopTx",
        method: "post",
        page: true,
        even: true,
        height: "666",
        limit: 20,
        cols: [[
            {type: "checkbox", width: 50},
            {type: "numbers", title: "序号", width: 50},
            {field: "objId", title: "主键", hide: true},
            {
                field: "title", title: "美食店名"
            },
            {field: "tel", title: "电话"},
            {field: "address", title: "地址"},
            {field: "category", title: "类型"},
            {field: "lat", title: "经度"},
            {field: "lng", title: "纬度"},
            {field: "createTime", title: "大数据计算时间"}
        ]]
    });

    function showDetail(e) {
        const detailUrl = $(e).attr("detailUrl");
        parent.layer.open({
            type: 2,
            content: [detailUrl, 'no'],
            area: ['1600px', '777px']
        });
    }

    function showDetail2(e) {
        const id = $(e).attr("id");
        parent.layer.open({
            type: 2,
            title: "详情",
            area: ["90%", "90%"],
            content: "./table/detail.html?id=" + id
        });
    }

    function search(e) {
        const name = $("#form1 input[name='name']");
        const address = $("#form1 input[name='address']");
        const tag = $("#form1 input[name='tag']");
        table1.reload({
            where: {
                name: name.val(),
                address: address.val(),
                tag: tag.val()
            },
            page: {
                curr: 1
            }
        });
    }

    function search2(e) {
        const name = $("#form2 input[name='name']");
        const address = $("#form2 input[name='address']");
        const type = $("#form2 input[name='type']");
        table2.reload({
            where: {
                name: name.val(),
                address: address.val(),
                type: type.val()
            },
            page: {
                curr: 1
            }
        });
    }

    function search3(e) {
        const name = $("#form3 input[name='name']");
        const address = $("#form3 input[name='address']");
        const type = $("#form3 input[name='type']");
        table3.reload({
            where: {
                name: name.val(),
                address: address.val(),
                type: type.val()
            },
            page: {
                curr: 1
            }
        });
    }


</script>
</html>